<template>
    <div>
        <!--查询框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="交易类型:">
                <el-select v-model="formInline.dealType" placeholder="请选择">
                    <el-option v-for="item in formInline.deal_type_list" :key="item.code" :value="item.code" :label="item.text"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户:">
                <el-select v-model="formInline.customer" placeholder="请选择">
                    <el-option v-for="item in formInline.customer_list" :key="item.code" :value="item.code" :label="item.text"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期: ">
                <template>
                    <div class="block">
                        <el-date-picker
                            v-model="times"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions2">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <label>充值总额: {{ rechargeAmount }}</label>
            <label>扣款总额: {{ consumeAmount }}</label>
            <label>平台余额: {{ balance }}</label>
        </div>
        <!--表格-->
        <el-table id="customerSteamList" :data="tableData" height="500px" max-height="500px" size="500px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
            <el-table-column align="center" label="流水金额" prop="amount"></el-table-column>
            <el-table-column align="center" label="交易类型" prop="type"></el-table-column>
            <el-table-column align="center" label="客户" prop="customerName"></el-table-column>
            <el-table-column align="center" label="备注" prop="remark"></el-table-column>
            <el-table-column align="center" label="日期" prop="createTime"></el-table-column>
            <!--<el-table-column align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)">详情</el-button>
                </template>
            </el-table-column>-->
        </el-table>

        <!--分页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pageHelper>
        </div>

    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import {mytips,timeFormat} from '@/module/tools';
    import pageHelper from '../common/pageHelper';

    document.title='客户流水';
    export default {
        name: 'customerStreamList',
        components: {pagination,pageHelper},
        data() {
            return {
                formInline: {
                    dealType: null,
                    deal_type_list: [
                        {text: '全部',code: null},
                        {text: '充值',code: '1'},
                        {text: '扣款', code: '2'}
                    ],
                    customer: null,
                    customer_list: [
                        {text: '全部',code: null}
                    ]
                },
                rechargeAmount: 0,
                consumeAmount: 0,
                balance: 0,
                //表格数据
                tableData: [],
                totalPage: 0,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: null,
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                times: []
            };
        },

        mounted() {
            this.getCustomer();
            this.getData();
        },
        methods: {

            //获取所有客户
            getCustomer() {
                axios({
                    url: API_PATH + 'am/findCustomer',
                }).then(res => {
                    if (res.data.code == 0) {
                        this.formInline.customer_list = this.formInline.customer_list.concat(res.data.data.map(item => (
                            {
                                text: item.customerName,
                                code: item.customerId
                            }
                        )))
                    }
                })
            },

            /*翻页跳转处理，传入页数*/
            getData: function (page,size) {
                page = page || 1;
                size = size || 10;

                let beginTime = null;
                let endTime = null;
                if (this.times.length > 0) {
                    const startTime = this.times[0];
                    const end = this.times[1];
                    beginTime = timeFormat(startTime,'yyyy-MM-dd hh:mm:ss');
                    endTime = timeFormat(end,'yyyy-MM-dd hh:mm:ss');
                }
                let target = document.getElementById('customerSteamList');
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,1)',
                    target: target,
                    spinner: 'el-icon-loading'
                });
                axios.get(
                    API_PATH + "/customerFund/query",
                    {
                        params: {
                            queryType: 2,
                            type: this.formInline.dealType,
                            fundCustomerId: this.formInline.customer,
                            beginTime: beginTime,
                            endTime: endTime,
                            page: page,
                            size: size
                        }
                    }
                ).then(
                    res => {
                        this.loading.close();
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.totalPage = Math.ceil(res.data.data.total / size);
                            this.total = Math.ceil(res.data.data.total);
                            this.pageSize = size;
                            this.currentPage = page;
                        }
                    },
                    xhr => this.loading.close()
                );
            },
            //每页显示多少条
            handleSizeChange(size) {
                this.pageSize = size;
                this.getData(1,this.pageSize);
            },
            //当前页
            handleCurrentChange(page) {
                this.getData(page,this.pageSize)
            },
            handleClick(row) {

            }
        }
    }
</script>

